<template>
	<view class="store-list-page">
		<hsb-business-store-city
			v-model="cityPopup"
			:seleCityId="currentCity.cityId"
			:list="cityList"
			@change="changeCity"
		/>
		<view class="store-map">
			<view
				v-show="!cityPopup"
			>
				<map
					:longitude="storeLocation.longitude"
					:latitude="storeLocation.latitude"
					:markers="markers"
					class="store-map-comp"
				/>
			</view>
		</view>
		<view class="store-content">
			<scroll-view
				scroll-y="true"
				class="store-scroll-view"
				@scrolltolower="getStoreList(true)"
			>
				<hsb-business-store-list
					:list="storeList"
					@choose-store="chooseStore"
				/>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex'
import { computedDistance } from '@/utils'

export default {
	computed: {
		...mapState({
			userLocation: state => state.userLocation
		}),
		storeLocation () {
			return this.storeList.find(item => item.latitude && item.longitude) || {}
		},
		markers () {
			return this.storeList.map(item => {
				return {
					id: Number(item.storeId),
					latitude: item.latitude,
					longitude: item.longitude,
					width: 32,
					width: 35,
					iconPath: require('@/static/images/icon_map.png'),
					callout: {
						content: item.store || '回收宝门店',
						padding: 0,
						bgColor: '#ffffff',
						borderColor: '#ffffff',
						borderRadius: 8
					}
				}
			})
		}
	},
	data () {
		return {
			cityId: '',
			cityList: [],
			storeList: [],
			currentCity: {},
			cityPopup: false,
			loading: false,
			pageIndex: 1,
			pageSize: 10,
			pageInfo: {}
		}
	},
	methods: {
		/*
		 * 门店城市列表
		*/
		async getCityList () {
			const [res] = await this.$apis.getCityList()
			if (res._errCode === '0') {
				this.cityList = res._data.cityList || []
				this.currentCity = this.cityList.find(e => e.cityId === this.cityId) || this.cityList[0] || {}
				this.getStoreList()
			}
		},
		/*
		 * 门店列表
		*/
		async getStoreList (more = false) {
			if (
				this.loading ||
				(this.pageInfo.total > 0 && Number(this.pageInfo.total) === this.storeList.length)
			) return
			this.loading = true
			const params = {
				pageIndex: more ? Number(this.pageIndex) + 1 : 1,
				pageSize: this.pageSize
			}
			if (this.currentCity.cityId) {
				params.areaId = this.currentCity.cityId
			}
			if (this.userLocation.longitude && this.userLocation.latitude) {
				params.longitude = this.userLocation.longitude
				params.latitude = this.userLocation.latitude
			}
			const [res] = await this.$apis.getStoreList(params)
			this.loading = false
			if (res._errCode === '0') {
				const list = res._data.storeList || []
				list.forEach(item => {
					item.distances = computedDistance(item.distance || '')
				})
				this.storeList = more ? this.storeList.concat(list) : list
				this.pageIndex = params.pageIndex
				this.pageInfo = res._data.pageInfo || {}
			} else {
				uni.showToast({
					title: res._errStr || '获取门店失败',
					icon: 'none'
				})
			}
		},
		/*
		 * 切换城市
		*/
		changeCity (cityInfo) {
			this.currentCity = cityInfo
			this.pageInfo = {}
			this.storeList = []
			this.getStoreList()
		},
		/*
		 * 选择门店
		*/
		chooseStore (storeInfo) {
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.emit('saveStoreInfo', {
				data: storeInfo
			})
			uni.navigateBack()
		}
	},
	onLoad (options) {
		this.cityId = options.cityId || ''
		this.getCityList()
	}
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
